<template>
  <header class="header">
    <!-- logo -->
    <!-- <div class="logo_bus">
      <img src="../../assets/img/logo_bus.jpg" alt="" class="img" />
    </div> -->
    <!-- 标题 -->
    <img class="logo" src="../../assets/image/logo.webp" alt="" />
    <h3 class="title">光谷智慧交通系统</h3>
    <!-- 导航菜单 -->
    <div class="check_menu_container">
      <el-menu
        :default-active="activeIndex"
        class="check_menu"
        mode="horizontal"
        @select="handleSelect"
        :ellipsis="false"
      >
        <el-menu-item index="0">
          <!-- 实时路况 -->
          <live-traffic-updates></live-traffic-updates>
        </el-menu-item>
        <el-menu-item index="1" v-if="userInfo.type === 'common'">
          <!-- 查看公告 -->
          <view-announcement></view-announcement>
        </el-menu-item>
        <el-menu-item index="2" v-if="userInfo.type === 'common'">
          <!-- 报告路况（事故） -->
          <report-event></report-event>
        </el-menu-item>
        <el-menu-item
          index="3"
          v-if="userInfo.type === 'traffic' || userInfo.type === 'admin'"
        >
          <!--  视频监控-->
          <video-surveillance></video-surveillance>
        </el-menu-item>
        <!-- 事件管理 -->
        <el-sub-menu
          index="4"
          v-if="userInfo.type === 'traffic' || userInfo.type === 'admin'"
        >
          <template #title>事件管理</template>
          <!-- 事件添加,事件更新 -->
          <trafevent-manage></trafevent-manage>
        </el-sub-menu>
        <!-- 事件拉框查询 -->
        <el-menu-item index="5"><e-draw-search></e-draw-search></el-menu-item>
        <el-menu-item
          index="6"
          v-if="userInfo.type === 'traffic' || userInfo.type === 'admin'"
          ><lssue-announcement></lssue-announcement
        ></el-menu-item>
        <el-menu-item
          index="7"
          v-if="userInfo.type === 'traffic' || userInfo.type === 'admin'"
          ><event-msg></event-msg
        ></el-menu-item>
        <el-sub-menu index="8">
          <template #title>工具箱</template>
          <!-- 测量距离面积 -->
          <measure-tool></measure-tool>
          <el-menu-item index="8-4">
            <!-- 导出图片 -->
            <export-picture></export-picture>
          </el-menu-item>
          <el-menu-item index="8-5">
            <!--  复位 -->
            <reset-map></reset-map>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!-- input搜索框 -->
    <!-- 事件搜索框查询 -->
    <div class="input">
      <e-key-search></e-key-search>
    </div>

    <!-- 显示用户名 -->
    <!-- <el-menu class="check_menu user" mode="horizontal" ellipsis="false" active-text-color="#fff"> -->
    <el-menu class="check_menu user" mode="horizontal" :ellipsis="false">
      <el-sub-menu index="9">
        <!-- 显示用户名 -->
        <template #title>{{ userInfo.username }}</template>
        <el-menu-item index="9-1" v-if="userInfo.type === 'admin'">
          <!-- 用户管理 -->
          <user-manage></user-manage>
        </el-menu-item>
        <el-menu-item index="9-2" @click="logOut">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </header>
</template>

<script setup>
import EventMsg from "../../views/home/components/traffic/EventMsg/EventMsg.vue";
import ReportEvent from "../../views/home/components/common/ReportEvent.vue";
import LiveTrafficUpdates from "../LiveTrafficUpdate/LiveTrafficUpdates.vue";
// 搜素查询
import EKeySearch from "../EventSearch/EKeyWordSearch.vue";
// 拉框查询
import EDrawSearch from "../../views/home/components/traffic/DrawSearch/EDrawSearch.vue";
import UserManage from "../../views/home/components/admin/UserManage.vue";
import ResetMap from "../ResetMap.vue";
import ExportPicture from "../ExportPicture.vue";
import VideoSurveillance from "../../components/Surveillance/VideoSurveillance.vue";
// 测量
import MeasureTool from "../MeasureTool.vue";
//查看公告
import ViewAnnouncement from "../../views/home/components/common/ViewAnnouncement.vue";
//发布公告
import LssueAnnouncement from "../../views/home/components/traffic/LssueAnnouncement/LssueAnnouncement.vue";
// 事件管理
import TrafeventManage from "../../views/home/components/traffic/TrafficEventManage/TrafeventManage.vue";
import { usePiniaStore } from "../../stores/pinia";
import { storeToRefs } from "pinia";
import { UserHttp } from "../../request/UserHttp.js";
import { ElMessage } from "element-plus";
import { onMounted } from "vue";
const piniaStore = usePiniaStore();
const $router = useRouter();
// 用户信息
const { userInfo } = storeToRefs(piniaStore);
// 用户退出登录
const logOut = async () => {
  // 移除本地token和用户信息 必须先移除
  localStorage.removeItem("token");
  localStorage.removeItem("userInfo");
  // 修改用户登录状态
  let resLogout = await UserHttp.LogoutUserHttp(userInfo.value);
  // console.log(resLogout, 444);
  if (resLogout.data.code === 200) {
    ElMessage({
      type: "success",
      message: "登出成功",
    });
    $router.push("/login");
  }
};

// 顶部导航菜单的active索引
const activeIndex = ref();
// 导航菜单索引切换的函数
function handleSelect(key, keyPath) {
  // console.log(key, keyPath);// 4 ['4']
  // 8-1  ['sub-menu-more', '8', '8-1']
  activeIndex.value = key;
  // console.log(activeIndex.value);
}
onMounted(() => {
  // console.log(userInfo.value.username);
});
</script>

<style lang="scss" scoped>
.header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 70px;
  padding-inline: 30px;
  // background-color: #fff;
  background-image: url("../../assets/image/headerbg4.png");
  // background-size: cover;
  object-fit: fill;
  box-shadow: 0 0 15px 0 rgba(0, 60, 136, 0.7);
  .logo {
    width: 70px;
    height: 60px;
    margin-block: 5px;
  }
  .title {
    flex-shrink: 0;
    width: 152px;
    // margin-left: 3px;
    margin-right: 10px;
    line-height: 70px;
  }
  .check_menu_container {
    width: 54%;
    display: flex;
    justify-content: flex-start;
    .check_menu {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      border: none;
      background-color: rgba($color: #000000, $alpha: 0);
      .el-menu-item,
      .el-sub-menu {
        width: 100px;
        font-size: 15px;

        :deep(.el-sub-menu__title) {
          font-size: 15px;
        }
      }
      //   .el-sub-menu:hover {
      //     background-color: #409eff;
      //   }
    }
  }
  .input {
    align-self: center;
    height: 40px;
    width: 300px;
  }
  .check_menu.user {
    // flex时，浮动失效
    // float: right;
    background-color: rgba($color: #000000, $alpha: 0);

    width: 110px;
    border: none !important;
    :deep(.el-sub-menu) {
      &.is-active {
        border: none !important;
      }
    }
  }
}
.el-sub-menu :deep(.el-icon.el-sub-menu__icon-arrow) {
  right: 5px;
}
</style>
